<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <!--360自动切换极速-->
    <meta name="apple-mobile-web-app-title" content="DAN潜水" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="${ctxPath}/image/favicon.ico"/>
    <!--阻止iphone识别为电话-->
    <link rel="stylesheet" type="text/css" href="${ctxPath}/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPath}/css/global.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPath}/css/index.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPath}/libs/datepicker/css/bootstrap-datepicker3.min.css" />

    <style>
        html,body{
            height: 100%;
        }
        .login-bg{
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background:url('${ctxPath}/image/banner.png');
            background-size: cover;
        }
        .modal.show .modal-dialog{
            padding-top: 60px;
            width: 384px;
        }
        .dan-modal .modal-footer{
            margin-top: 40px;
        }
    </style>
    <title>DAN潜水</title>
</head>

<body>
<div class="login-bg"></div>
<!-- Modal/login-->
<div class="modal fade dan-modal" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">帳號密碼登入</h4>
                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button> -->
                <button type="button" class="close" onclick="javascript:history.go(-1);"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form id="loginForm" class="form">
                    <div class="form-group row">
                        <div class="col-3">
                            <select id="loginCountryCodeSelect" class="form-control" name="countryCode">
                                @for(countryCode in countryCodeList!){
                                <option>${countryCode.code!}</option>
                                @}
                            </select>
                        </div>
                        <div class="col-9">
                            <input id="loginPhoneInput" type="text" class="form-control" placeholder="請輸入手機號碼" name="phone" value="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-3 control-label">密碼</label>
                        <div class="col-9">
                            <input id="loginPasswordInput" type="password" class="form-control" placeholder="請輸入密碼" name="password" value="">
                        </div>
                    </div>
                    <div class="forget-password" data-toggle="modal" data-dismiss="modal" data-target="#forgetPassword" style="cursor:pointer">忘記密碼
                    </div>
                    <button type="button" class="btn btn-danger dan-btn-full" onclick="login()" style="cursor:pointer">登入</button>
                </form>
            </div>
            <div class="modal-footer">
                <div class="go-register" data-toggle="modal" data-target="#register" data-dismiss="modal" style="cursor:pointer">手機號注册></div>
            </div>
        </div>
    </div>
</div>
<!-- Modal/register-->
<div class="modal fade dan-modal" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">註冊帳號</h4>
                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button> -->
                <button type="button" class="close" data-toggle="modal" data-target="#login" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form id="registerForm" class="form">
                    <div class="form-group row">
                        <div class="col-3">
                            <select id="registerCountryCodeSelect" class="form-control" name="countryCode">
                                @for(countryCode in countryCodeList!){
                                <option>${countryCode.code!}</option>
                                @}
                            </select>
                        </div>
                        <div class="col-9">
                            <input id="registerPhoneInput" type="text" class="form-control" placeholder="請輸入手機號碼" name="phone" value="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="form-group">
                                <input id="registerCaptchaCodeInput" type="text" class="form-control" placeholder="請輸入驗證碼" name="captchaCode" value="">
                            </div>
                        </div>
                        <div class="col-4 sms-code">
                            <div class="form-group code-btn">
                                <span onclick="sendSmsCode_register()" style="cursor:pointer" id="sms-btn-register">獲取驗證碼</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <input id="registerPasswordInput" type="password" class="form-control" placeholder="請輸入8－16字元，必須包含數位和字母" name="password" value="">
                    </div>
                    <div class="form-group">
                        <input id="registerBirthdayInput" name="birthday" type="text" class="form-control datepicker"
                               data-date-format="yyyy-mm-dd"
                               placeholder="請選擇您的生日"
                               name="" value="" id="date_birth">
                    </div>
                    <div class="form-group">
                        <select id="registerSexSelect" name="sex" class="form-control" >
                            <option value='' disabled selected>請選擇您的性別</option>
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                    <div style="font-size:12px;color:#d0001a">提醒：以上資訊會影響您的唯一會員卡，請如實填寫！</div>
                    <button type="button" class="btn btn-danger dan-btn-full" onclick="register()" style="margin-bottom: -50px;cursor:pointer">註冊帳號</button>
                </form>
            </div>
            <div class="modal-footer">
                <div class="go-register" data-toggle="modal" data-target="#login" data-dismiss="modal" style="cursor:pointer">
                    <span class="has-account">已有帳號？</span>
                    去登入>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal/password-->
<div class="modal fade dan-modal" id="forgetPassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">修改密碼</h4>
                <button type="button" class="close" onclick="javascript:history.go(-1);"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form id="forgetPasswordForm" action="" class="form">
                    <div class="form-group row">
                        <div class="col-3">
                            <select id="forgetPasswrodCountryCodeSelect" class="form-control" name="countryCode">
                                @for(countryCode in countryCodeList!){
                                <option>${countryCode.code!}</option>
                                @}
                            </select>
                        </div>
                        <div class="col-9">
                            <input id="forgetPasswordPhoneInput" type="text" class="form-control" placeholder="請輸入手機號碼" name="phone" value="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="form-group">
                                <input id="forgetPasswordCaptchaCodeInput" type="text" class="form-control" placeholder="請輸入驗證碼" name="captchaCode" value="">
                            </div>
                        </div>
                        <div class="col-4 sms-code">
                            <div class="form-group code-btn">
                                <span onclick="sendSmsCode_forgetPwd()" style="cursor:pointer" id="sms-btn-forgetPwd">獲取驗證碼</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <input id="forgetPasswordPasswordInput" type="password" class="form-control" placeholder="請輸入新密碼" name="password" value="">
                    </div>
                    <div class="form-group row">
                        <input id="forgetPasswordPasswordConfirmInput" type="password" class="form-control" placeholder="請再次輸入新密碼" name="passwordConfirm" value="">
                    </div>
                    <button type="button" class="btn btn-danger dan-btn-full" onclick="forgetPassord()" style="cursor:pointer">提交</button>
                </form>
            </div>
            <div class="modal-footer">
                <div class="go-register" data-toggle="modal" data-target="#login" data-dismiss="modal" style="cursor:pointer">
                    <span class="has-account">想起密碼？</span>
                    去登入>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPath}/js/jquery.min.js"></script>
<script src="${ctxPath}/js/bootstrap.bundle.min.js"></script>
<script src="${ctxPath}/libs/datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="${ctxPath}/libs/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<script>
    $(document).ready(function(){

    @if(showModel == 'login'){
            $('#login').modal('show')
        @}else{
            $('#register').modal('show')
        @}

    });

    var sms_register={
        setting:60,
        text: '發送驗證碼',
        seconds: 60,
        countryCode:null,
        phone:null,
    }
    var sms_forgetPwd={
        setting:60,
        text: '發送驗證碼',
        seconds: 60,
        countryCode:null,
        phone:null,
    }
    var interval_register
    var interval_forgetPwd

    var sendSmsCode_register=function(){
        var ele=$('#sms-btn-register')
        var countryCode = $('#registerCountryCodeSelect').val();
        var phone=$('#registerPhoneInput').val()
        if(sms_register.seconds!=sms_register.setting||sms_register.phone==phone){
            return
        }
        if(!phone||phone==''){
            alert('请输入正确手机号码！')
            return
        }else if('+86'==countryCode && phone.length!=11){
            alert('请输入正确手机号码！')
            return
        }
        sms_register.phone=phone
        interval_register=setInterval(function(){
            sms_register.seconds--
            if (sms_register.seconds === 0) {
                sms_register.text = '發送驗證碼'
                sms_register.seconds = sms_register.setting
                clearInterval(interval_register)
                sms_register.phone=null
                ele.css('color','#d0001a')
            } else {
                sms_register.text = sms_register.seconds + 's重新獲取'
                ele.css('color','#999')
            }
            ele.text(sms_register.text)
        },1000)
        //请求发送验证码
        sendCaptchaCode(true);
    }

    var sendSmsCode_forgetPwd=function(){
        var ele=$('#sms-btn-forgetPwd')
        var countryCode = $('#forgetPasswrodCountryCodeSelect').val();
        var phone=$('#forgetPasswordPhoneInput').val()
        if(sms_forgetPwd.seconds!=sms_forgetPwd.setting||sms_forgetPwd.phone==phone){
            return
        }
        if(!phone||phone==''){
            alert('请输入正确手机号码！')
            return
        }else if('+86'==countryCode && phone.length!=11){
            alert('请输入正确手机号码！')
            return
        }
        sms_forgetPwd.phone=phone
        interval_forgetPwd=setInterval(function(){
            sms_forgetPwd.seconds--
            if (sms_forgetPwd.seconds === 0) {
                sms_forgetPwd.text = '發送驗證碼'
                sms_forgetPwd.seconds = sms_forgetPwd.setting
                clearInterval(interval_forgetPwd)
                sms_forgetPwd.phone=null
                ele.css('color','#d0001a')
            } else {
                sms_forgetPwd.text = sms_forgetPwd.seconds+'s重新獲取'
                ele.css('color','#999')
            }
            ele.text(sms_forgetPwd.text)
        },1000)
        //请求发送验证码
        sendCaptchaCode(false);
    }

    function forgetPassord(){
        var forgetPasswordCountryCode = $("#forgetPasswrodCountryCodeSelect").val();
        var forgetPasswordPhone = $("#forgetPasswordPhoneInput").val();
        var forgetPasswordCaptchaCode = $("#forgetPasswordCaptchaCodeInput").val();
        var forgetPasswordPassword = $("#forgetPasswordPasswordInput").val();
        var forgetPasswordPasswordConfirm = $("#forgetPasswordPasswordConfirmInput").val();
        if(forgetPasswordCountryCode == ''){
            alert("請選擇國家區號");
            return false;
        }
        if(forgetPasswordPhone == ''){
            alert("請輸入手機號碼");
            return false;
        }
        if(!checkPhone(forgetPasswordCountryCode, forgetPasswordPhone)){
            alert("請輸入正確的手機號碼");
            return false;
        }
        if(forgetPasswordCaptchaCode == ''){
            alert("請輸入驗證碼");
            return false;
        }
        if(forgetPasswordPassword == ''){
            alert("請輸入密碼");
            return false;
        }
        if(forgetPasswordPasswordConfirm == ''){
            alert("請再次輸入密碼");
            return false;
        }
        if(!checkPwd(forgetPasswordPassword)){
            alert("密碼中必須包含數位和字母，至少8個字元，最多16個字元");
            return false;
        }
        if(forgetPasswordPasswordConfirm!=forgetPasswordPassword){
            alert("兩次輸入的密碼不一致");
            return false;
        }

        $.ajax({
            type: "post",
            dataType: "json",
            url: '${ctxPath}/forgetPassword',
            data: $('#forgetPasswordForm').serialize(),
            success: function(result){
                if(result.code == 500){
                    alert("網絡异常，請稍後再試！");
                }else if(result.code != 200){
                    alert(result.msg);
                }else{
                    alert("密碼設定成功，請登入");
                    $('#forgetPassword').modal('hide');
                    $('#login').modal('show');
                }
            },
            error: function(){
                alert("網絡异常，請稍後再試！");
            }
        });
    }

    function sendCaptchaCode(registerFlag){
        var countryCode;
        var phone;
        if(registerFlag){
            phone = $("#registerPhoneInput").val();
            countryCode = $('#registerCountryCodeSelect').val();
        }else{
            phone = $("#forgetPasswordPhoneInput").val();
            countryCode = $('#forgetPasswrodCountryCodeSelect').val();
        }
        if(countryCode == ''){
            alert("請選擇國家區號");
            return false;
        }
        if(phone == ''){
            alert("請輸入手機號碼");
            return false;
        }
        if(!checkPhone(countryCode, phone)){
            alert("請輸入正確的手機號碼");
            return false;
        }

        $.ajax({
            type: "post",
            dataType: "json",
            url: '${ctxPath}/catpchaCode',
            data: {
                countryCode: countryCode,
                phone: phone,
                type: registerFlag ? "register" : "changePwd"
            },
            success: function(result){
                if(result.code == 500){
                    alert("網絡异常，請稍後再試！");
                }else if(result.code != 200){
                    alert(result.msg);
                }else{
                    alert("驗證碼發送成功");
                }
            },
            error: function(){
                alert("網絡异常，請稍後再試！");
            }
        });
    }

    function login(){
        var loginCountryCode = $('#loginCountryCodeSelect').val();
        var loginPhone = $("#loginPhoneInput").val();
        var loginPassword = $("#loginPasswordInput").val();
        if(loginCountryCode == ''){
            alert("請選擇國家區號");
            return false;
        }
        if(loginPhone == ''){
            alert("請輸入手機號碼");
            return false;
        }
        if(!checkPhone(loginCountryCode, loginPhone)){
            alert("請輸入正確的手機號碼");
            return false;
        }
        if(loginPassword == ''){
            alert("請輸入密碼");
            return false;
        }

        $.ajax({
            type: "post",
            dataType: "json",
            url: '${ctxPath}/login',
            data: $('#loginForm').serialize(),
            success: function(result){
                if(result.code == 500){
                    alert("網絡异常，請稍後再試！");
                }else if(result.code != 200){
                    alert(result.msg);
                }else{
                    window.location.href="${ctxPath}/";
                }
            },
            error: function(){
                alert("網絡异常，請稍後再試！");
            }
        });
    }

    function register(){
        var registerCountryCode = $('#registerCountryCodeSelect').val();
        var registerPhone = $("#registerPhoneInput").val();
        var registerCaptchaCode = $("#registerCaptchaCodeInput").val();
        var registerPassword = $("#registerPasswordInput").val();
        var registerBirthday = $("#registerBirthdayInput").val();
        var registerSex = $("#registerSexSelect").val();
        if(registerCountryCode == ''){
            alert("請選擇國家區號");
            return false;
        }
        if(registerPhone == ''){
            alert("請輸入手機號碼");
            return false;
        }
        if(!checkPhone(registerCountryCode, registerPhone)){
            alert("請輸入正確的手機號碼");
            return false;
        }
        if(registerCaptchaCode == ''){
            alert("請輸入驗證碼");
            return false;
        }
        if(registerPassword == ''){
            alert("請輸入密碼");
            return false;
        }
        if(!checkPwd(registerPassword)){
            alert("密碼中必須包含數位和字母，至少8個字元，最多16個字元");
            return false;
        }
        if(registerBirthday == ''){
            alert("請選擇您的生日");
            return false;
        }
        if(registerSex == null || registerSex == ''){
            alert("請選擇您的性別");
            return false;
        }

        $.ajax({
            type: "post",
            dataType: "json",
            url: '${ctxPath}/register',
            data: $('#registerForm').serialize(),
            success: function(result){
                if(result.code == 500){
                    alert("網絡异常，請稍後再試！");
                }else if(result.code != 200){
                    alert(result.msg);
                }else{
                    alert("注册成功，請登入");
                    $('#register').modal('hide');
                    $('#login').modal('show');
                }
            },
            error: function(){
                alert("網絡异常，請稍後再試！");
            }
        });
    }

    function checkPhone(countryCode, phone){
        if('+86' == countryCode){
            return /^1[3456789]\d{9}$/.test(phone);
        }
        return true;
    }

    function checkPwd(password){
        var pwdRegex = new RegExp('^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$');
        return pwdRegex.test(password);
    }

    function DatePicker(selector){
        // 仅选择日期
        $(selector).datepicker(
            {
                language:  "zh-CN",
                autoclose: true,
                startView: 0,
                format: "yyyy-mm-dd",
                clearBtn:true,
                todayBtn:false,
                endDate:new Date()
            }).on('changeDate', function(ev){

        })
    }

    DatePicker("#registerBirthdayInput");
</script>
</body>

</html>